<!-- 财务设置->开户银行 -->
<template>
    <div class="content-wrapper a-base-container">
        <div class="business-big-box" style="margin:2px 8px;">
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2" v-if="permissions.includes('bank:add')">
                            <div class="btns" @click="add">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :span="2" v-if="permissions.includes('bank:edit')">
                            <div class="btns" @click="edit">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col>
                        <a-col :span="2" v-if="permissions.includes('bank:delete')">
                            <div class="btns" @click="remove">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div class="resize-table-container" style="width:800px">
                <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 0, y: 500}" :pagination="pagination" style="font-size: 12px;" :row-selection="{selectedRowKeys: selectedKeys, onChange: selection}" @change="onTableChange">
                    <slot slot="accountType" slot-scope="text">
                        {{text == 1?'银行账号':text == 2?'微信账号':text == 3?'支付宝账号':text == 4?'个人银行卡':''}}
                    </slot>
                </a-table>
            </div>

            <a-modal v-model="editModal" :title="editItem.id ? '编辑开户银行' : '新增开户银行'" centered width="500px">
                <div id="components-form-demo-advanced-search">
                    <a-form class="ant-advanced-search-form" :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" @submit="handleSubmit">
                        <a-row :span="24">
                            <a-col :span="24">
                                <a-form-item label="账户名称">
                                    <a-input autocomplete="off" v-decorator="['accountName', { rules: [{ required: true, message: '账户名称不能为空' }] }]" placeholder="请输入账户名称" :disabled="isDisabled" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="账号类型">
                                    <a-select @change="changeAccountType" v-decorator="['accountType', { rules: [{ required: true, message: '账号类型不能为空' }] }]" placeholder="请输入账号类型">
                                        <a-select-option value="1">银行账号</a-select-option>
                                        <a-select-option value="2">微信账号</a-select-option>
                                        <a-select-option value="3">支付宝账号</a-select-option>
                                        <a-select-option value="4">个人银行卡</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="开户银行">
                                    <a-input autocomplete="off" v-decorator="['bankName', { rules: [{ required: true, message: '开户银行不能为空' }] }]" placeholder="请输入开户银行" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item :label="`${accountTypeName}`">
                                    <a-input autocomplete="off" v-decorator="['bankAccount', { rules: [{ required: true, message: `${accountTypeName}不能为空` }] }]" :placeholder="`请输入${accountTypeName}`" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="币种">
                                    <a-input-search placeholder="请选择币种" read-only allowClear v-model="editItem.currencyName" style="width: 302px" @search="handleSearch('currencyRef')" @click="handleSearch('currencyRef')" />
                                    <form-search-group ref="currencyRef" :dynamicData="{code:'currency',name:'币种',val:'currency',value:editItem.currencyName}" @clickItem="setValue"></form-search-group>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <template slot="footer">
                    <a-button type="primary" html-type="submit" @click="handleSubmit" v-if="permissions.includes('bank:save')">保存</a-button>
                    <a-button :style="{ marginLeft: '8px' }" @click="() => {editModal = false}">关闭</a-button>
                </template>
            </a-modal>
        </div>
    </div>
</template>
<script>

import { mapState } from "vuex";
import table from "@/mixins/table";
import { pageList, save, deleteBankAccount } from "@/api/erp/bankAccount";
import FormSearchGroup from '@/components/Form/FormSearchGroup';

export default {
    mixins: [table],
    components: {
        FormSearchGroup
    },
    data() {
        const columns = [
            {
                align: "left",
                title: "账户名称",
                dataIndex: "accountName",
                width: 150
            },
            {
                align: "left",
                title: "账户类型",
                dataIndex: "accountType",
                width: 80,
                scopedSlots: { customRender: "accountType" }
            },
            {
                align: "left",
                title: "开户银行",
                dataIndex: "bankName",
                width: 120
            },
            {
                align: "left",
                title: "银行账号",
                dataIndex: "bankAccount",
                width: 120
            },
            {
                align: "left",
                title: "币种",
                dataIndex: "currencyName",
                width: 60
            },
        ];
        return {
            selectedKeys: [],
            selectedData: {},
            selectedIds: [],
            columns,
            data: [],
            editModal: false,
            editItem: {
                accountType: "1",
                currencyId: null,
                currencyName: null,
            },
            accountTypeName: '银行账号',
            form: this.$form.createForm(this, { name: "advanced_search" }),
            pagination: {
                defaultPageSize: 20,
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            postData: {
                "current": 1,
                "size": 20
            },
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    mounted() {
        this.PageList();
    },
    methods: {
        handleSearch(n) {
            this.$refs[`${n}`].showModal();
        },
        setValue(data) {
            if (data.name) {
                this.editItem.currencyId = data.id;
                this.editItem.currencyName = data.name;
            } else {
                this.editItem.currencyId = null;
                this.editItem.currencyName = null;
            }
            this.$forceUpdate();
        },
        // 获取列表
        PageList() {
            const { postData } = this;
            pageList(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data = records;
                    Object.assign(this.pagination, {
                        total
                    });
                }
            }).catch(error => { });
        },
        changeAccountType(k, v) {
            // this.accountTypeName = v.componentOptions.children[0].text;
            this.editItem.accountType = k;
        },
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                let id = this.editItem.id;
                this.editItem = Object.assign(this.editItem, { ...values });
                console.log(this.editItem);

                this.editItem.id = id;
                if (!err) {
                    save(this.editItem).then(response => {
                        if (response.code === 200) {
                            this.$message.success("保存成功");
                            //刷新 列表
                            this.editModal = false;
                            this.PageList();
                            this.selectedKeys = [];
                            this.selectedData = [];
                        } 
                    })
                }
            });
        },
        add() {
            this.editModal = true
            this.editItem = {
                accountType: "1",
            };
            this.accountTypeName = '银行账号';
            this.form = this.$form.createForm(this, {
                mapPropsToFields: () => {
                    return {
                        accountType: this.$form.createFormField({
                            value: "1"
                        }),
                    };
                }
            });
        },
        edit() {
            if (this.selectedKeys.length != 1) {
                this.$message.warning("请选择一条数据");
                return;
            }
            this.editModal = true
            this.editItem = { ... this.selectedData };

            delete this.editItem.createDate;
            delete this.editItem.createUserId;
            delete this.editItem.updateDate;
            delete this.editItem.updateUserId;

            console.log(this.editItem);
            this.form = this.$form.createForm(this, {
                mapPropsToFields: () => {
                    return {
                        accountName: this.$form.createFormField({
                            value: this.editItem.accountName
                        }),
                        accountType: this.$form.createFormField({
                            value: "" + this.editItem.accountType + ""
                        }),
                        bankName: this.$form.createFormField({
                            value: this.editItem.bankName
                        }),
                        bankAccount: this.$form.createFormField({
                            value: this.editItem.bankAccount
                        }),
                        currency: this.$form.createFormField({
                            value: this.editItem.currency
                        }),
                    };
                }
            });
        },
        remove() {
          if (this.selectedKeys.length < 1) {
              this.$message.warning("请选择一条数据");
              return;
          }
          let _this = this;
          this.$confirm({
            title: '提示',
            content: '您确定要删除该银行设置吗？',
            onOk() {
                deleteBankAccount(_this.selectedIds).then(res => {
                    if (res.code == 200) {
                        _this.PageList();
                        _this.selectedKeys = [];
                        _this.selectedData = [];
                        _this.$message.success("删除成功");
                    } 
                });
            },
            onCancel() {
            },
          });
        },
        changePageSize(e) {
            const value = e.target.value;
            const { pagination } = this;

            console.log(e, value);
            Object.assign(this.postData, {
                "size": value
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value)
            });
        },
        onTableChange(pagination, filters, sorter) {
            Object.assign(this.postData, {
                "current": pagination.current,
                "size": pagination.pageSize
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.PageList();
        },
        onCellChange(item, dataIndex, editValue) {
            if (item[dataIndex] != editValue) {
                const edit = { id: item.id, [dataIndex]: editValue };
                this.TreeSortEditList.set(item.id, edit);
            } else {
                this.TreeSortEditList.delete(item.id);
            }
            console.log([...this.TreeSortEditList.values()]);
        },
        selection(keys, row) {
            this.selectedKeys = [];
            this.selectedKeys = keys;
            this.selectedData = row[0];
            const ids = new Array();
            row.forEach(function (val) {
                ids.push(val.id);
            });
            this.selectedIds = ids;
            console.log("rowKeys", this.selectedData);
        },
    }
};
</script>
<style  scoped>
.form-inline label {
    justify-content: left !important;
}
.form-inline > .col {
    margin-bottom: 1.5rem !important;
}
.icons-list >>> .anticon {
    margin-right: 8px;
    font-size: 16px;
}
.ant-advanced-search-form {
    padding: 24px;
    background: #fbfbfb;
}

.ant-advanced-search-form .ant-form-item {
    display: flex;
    margin-bottom: 0px !important;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
    flex: 1;
}

#components-form-demo-advanced-search .ant-form {
    max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
    margin-top: 16px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
}
</style>
<style lang="less">
@import "~@/style/setting/business.less";
</style>